<template>
  <div class="page38" v-loading="loading">
    <div class="page-title">收入环比分析—收入下降TOP客户（码号）</div>
    <div class="tableBox" style="margin-top: 20px">
      <el-table
        border
        stripe
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        ref="table"
      >
        <el-table-column label="VIP卡号" prop="vip_nbr" min-width="120" align="center"></el-table-column>
        <el-table-column label="客户名称" prop="cust_name" min-width="240" align="center"></el-table-column>
        <el-table-column label="归属" prop="c5_name" min-width="180" align="center"></el-table-column>
        <el-table-column label="上月收入" prop="last_month_income" min-width="130" align="center"></el-table-column>
        <el-table-column label="本月收入" prop="this_month_income" min-width="130" align="center"></el-table-column>
        <el-table-column label="环比下降金额" prop="hb_mon_inrease_amt" min-width="130" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },  
  data(){
    return {
      loading: false,
      tableData: [],
      columns: [],
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage37(
      { 
        token: this.form.token, 
        areaId: this.form.areaId, 
        acctMonth: this.form.month, 
        indexCode: "YS10077" 
      },
        res => {
          if(res.code == 0){
            this.tableData = res.content;
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.page38 {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
  }
}
.tableBox {
  margin-right: 10px;
  border-top: 1px solid #9abcf1;
  border-left: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  /deep/ .el-table.tableTh28 {
    .cell {
      padding: 0 !important;
      // zoom: 0.9;
      // font-size: 10px;
    }
    th {
      height: 23px;
      padding: 0;
      .cell {
        line-height: 20px;
        height: 20px;
      }
    }

    /deep/ tr.el-table__row td {
      padding: 0 !important;
    }
  }
  /deep/ .tableTh28 .el-table__header {
    .first-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }

    .second-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }
    .third-title.is-leaf {
      overflow: visible;
      .cell {
        width: 300%;
        left: -150%;
      }
    }
  }
  /deep/ .el-table tr:last-child td {
    color: #333;
    text-align: center;
    border-bottom: 1px solid transparent !important;
    border-right: 1px solid #bfbfbf !important;
  }
}
</style>